<template>
  <div class="main">
    <el-dialog v-model="visible" :title="title" :width="dialogWidth" :before-close="handleClose">
      <!-- 内容插槽 -->
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="showCancelButton" @click="handleClose">取消</el-button>
          <el-button v-if="showConfirmButton" type="primary" @click="handleConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, defineEmits } from 'vue'
/**
 * 传入的props变量
 */
const props = defineProps({
  title: {
    type: String,
    default: '提示',
  },
  dialogWidth: {
    type: String,
    default: '40%',
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
})
/**
 * 发射给父组件的方法
 * 用于子组件给父组件传值或调用父组件方法
 */
const emits = defineEmits(['submit', 'close'])
const visible = ref(false)
// 关闭弹框
const handleClose = () => {
  emits('close')
}
// 打开弹框
const handleOpen = () => {
  visible.value = true
}
// 确认事件
const handleConfirm = () => {
  emits('submit')
}
/**
 * 暴露给父组件的方法
 * 用于父组件调用子组件方法或获取子组件属性值
 */
defineExpose({ handleOpen, handleClose, visible })
onMounted(() => {})
</script>
<style scoped lang="scss"></style>
